<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖游戏</title>
</head>
<style>
*{
    box-sizing: border-box;
}
ul{
    list-style: none;
    overflow: hidden;
    width: 540px;
    text-align: center;
}
    li{
        width: 100px;
        height: 100px;
        margin: 30px;
        float: left;
        line-height: 68px;
        padding: 15px;
        border: 1px solid #fff;
    }
    .li-0{
        background: purple;
    }
    .color{
         border: 1px solid red;
    }
    .box{
        width: 100%;
        height: 100%;
        background: #999;
    }
</style>
<body>
    <div >
        <ul>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li-0" onclick="game()">开始</li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
            <li class="li">
                <div class="box">

                </div>
            </li>
        </ul>
    </div>
</body>
<script>
    var li_list=document.querySelectorAll('.li')
    var li_list=[li_list[0],li_list[1],li_list[2],li_list[4],li_list[7],li_list[6],li_list[5],li_list[3]]
    var li;
    var a;
    var num;
    var time;
    function game(){
     num=Math.round(Math.random()*16)+16
     for(var i=0;i<li_list.length;i++){
         if(li_list[i].className=='li color'){
             li_list[i].classList.remove('color')
         }
     }
       a=1;
       time=setInterval(function(){
        if(a<=num){
            b(a)
             a++;
        }
        else{
            clearInterval(time)
        }
       },500)
    }
    function b(i){
            li=i%8 
           if(li==0){
               li_list[6].classList.remove('color')
               li_list[7].classList.add('color')
           }
           else{
               if(li>1&& li_list[li-2].className=='li color'){
                li_list[li-2].classList.remove('color')
           }
           else if(i>1&&li==1){
            li_list[7].classList.remove('color')
           }
            li_list[li-1].classList.add('color')
           }
           
    }
</script>
</html>